<template>
	<view class="index_search_page">
		<view class="search_bar">
			<uni-search-bar @input="change" />
			<view class="chose" v-if="keyword!='' && !isShow">
				<view class="chose_item" @click="confirm(true)">搜索 <text>{{keyword}}</text> 商品</view>
				<view class="chose_item" @click="confirm(false)">搜索 <text>{{keyword}}</text> 店铺</view>
			</view>
		</view>
		<view class="tips" v-if="keyword==''">
			<text v-for="(v,k) in history" :key="k" class="name" @click="tipClick(v)">{{v}}</text>
		</view>
		<view class="clear_all_tip" v-if="history.length>0 && keyword == ''" @click="clearHis">清空历史记录</view>
		<mescroll-body ref="mescrollRef" @up="upCallback" :down="downOption" :up="upOption">
			<view class="goods_list" v-if="type">
				<view class="goods_item" v-for="(v,k) in list" :key="k" @click="$nav('/pages/goods/info?id='+v.id)">
					<view class="goods_image"><image  :src="v.goods_master_image||''" mode="aspectFit" /></view>
					<view class="goods_info">
						<view class="title">
							<text class="goods_name">{{v.goods_name||''}}</text>
						</view>
						<view class="goods_price">
							<text class="store_name">{{v.store_name}}</text>
						</view>
						<view class="goods_price" style="margin-top: 15rpx;">
							<text class="price">￥{{v.goods_price||0.00}}</text>
							<text class="title_before" title="">销量：{{v.goods_sale||0}}</text>
						</view>
					</view>
				</view>
				
			</view>
			<view class="store_list" v-if="!type">
				<view class="store_item"  v-for="(v,k) in list" :key="k" @click="$nav('/pages/store/index?id='+v.id)">
					<view class="store_logo"><image :src="v.store_logo||''" mode="aspectFit" /></view>
					<view class="store_info">
						<view class="title">
							<text class="store_name">{{v.store_name||'加载中...'}}</text>
							<text>距离 {{v.distance}}</text>
						</view>
						<view class="rate">
							<view class="title_before">综合评分：</view>
							<view><sx-rate :value="v.comment_rate/20" :disabled="true" fontSize="14px" containerClass="sxrate" /> </view>
						</view>
						<view class="address">
							<view class="title_before" title="">店铺地址：{{v.area_info+' '+v.store_address}}</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import sxRate from "@/components/sx-rate/index.vue"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {sxRate},
		data() {
			return {
				params:{
					page:1,
					per_page:10,
				},
				downOption:{
					use:false,
				},
				upOption:{
					auto:false,
				},
				keyword:'',
				isShow:false,
				list:[],
				type:true,
				history:[],
			};
		},
		onLoad() {
			let history = uni.getStorageSync('search_keyword')
			console.log(history)
			if(!this.$isEmpty(history)){
				this.history = history
			}
			this.getLocal();
		},
		methods:{
			confirm(e){
				if(this.history.length>=10){
					this.history.splice(10,1);
				}
				this.history.push(this.keyword);
				uni.setStorageSync('search_keyword',this.history)
				this.type = e;
				this.mescroll.resetUpScroll();
					
			},
			tipClick(e){
				this.keyword = e;
			},
			change(e){
				this.keyword = e.value;
				this.isShow = false
				console.log(e)
			},
			clearHis(){
				this.history = [];
				uni.removeStorageSync('search_keyword')
			},
			getLocal(){
				uni.getLocation({
				    type: 'wgs84 ',
				    success: (res)=> {
				        console.log(res);
						this.params.lat = res.latitude
						this.params.lng = res.longitude
				        console.log('经度：' + res.longitude);
				        console.log('纬度：' + res.latitude);
				    }
				});
			
			},
			upCallback(page){
				this.params.page = page.num; // 页码, 默认从1开始
				this.params.per_page = page.size; // 页长, 默认每页10条
				
				let baseObj = JSON.stringify({keywords:this.keyword});
				var b = new Buffer(baseObj);
				var basecode = b.toString('base64');
				this.params.params = basecode;
				
				if(this.type){
					this.$http(this.$api.goodsSearch,this.params).then(res=>{
						if(res.code == 200){
							this.isShow = true;
							if(this.params.page == 1){
								this.list = [];
							}
							this.list = this.list.concat(res.data.data||res.data); //追加新数据
							this.mescroll.endBySize(this.params.per_page, res.data.total); 
							if(res.data.total<8){
								this.mescroll.endUpScroll(false)
							}
							if(res.data.total==0){
								this.mescroll.showEmpty();
							}
						}
					})
				}else{
					this.$http(this.$api.getStores,this.params).then(res=>{
						if(res.code == 200){
							this.isShow = true;
							if(this.params.page == 1){
								this.list = [];
							}
							this.list = this.list.concat(res.data.data||res.data); //追加新数据
							this.mescroll.endBySize(this.params.per_page, res.data.total); 
							if(res.data.total<8){
								this.mescroll.endUpScroll(false)
							}
							if(res.data.total==0){
								this.mescroll.showEmpty();
							}
						}
					})
				}
				
			},
			
		}
	}
</script>

<style lang="scss">
.index_search_page{
	.search_bar{
		margin-top: 1px;
		.chose{
			padding: 0rpx 30rpx;
			background: #fff;
			padding-bottom: 20rpx;
			.chose_item{
				text{color:$uni-color-error;margin:0 10rpx}
				border-bottom: 1px solid #eee;
				&:last-child{border-bottom: none;}
				font-size: $uni-font-size-base;
				padding: 10rpx 0;
			}
		}
	}
	.tips{
		margin-top: 20rpx;
		padding: 30rpx;
		&:after{
			content:'';
			clear: both;
			display: block;
		}
		.name{
			margin:20rpx 10rpx;
			background: #888;
			color:#fff;
			border-radius: 20rpx;
			font-size: $uni-font-size-base;
			padding: 5rpx 25rpx;
			float: left;
		}
		
	}
	.clear_all_tip{clear: both;width: 70%;border:1px solid $uni-color-error;text-align: center;margin:0 auto;line-height: 60rpx;border-radius: 30rpx;color:$uni-color-error;margin-top: 40rpx;}
	.goods_list{
		padding-top: 20rpx;
		.goods_item{
			margin-bottom: 20rpx;
			background: #fff;
			width: 100%;
			min-height:150rpx ;
			border-radius: 10rpx;
			padding: 30rpx;
			&:after{
				content:'';
				display: block;
				clear: both;
			}
			.goods_info{
				float: left;
				position: relative;
				.goods_price{
					.price{color:$uni-color-error;}
					.store_name{color:#fff;font-size: $uni-font-size-sm;colo:#fff;background-color: $uni-color-error;border-radius: 10rpx;padding: 2rpx 20rpx;}
				}
				.title_before{margin-left: 20rpx;max-width: 500rpx;font-size: $uni-font-size-sm;color:#999;height: 45rpx;line-height: 45rpx;overflow: hidden; white-space: nowrap;text-overflow:ellipsis;}
				.title{margin-bottom: 10rpx;&:after{content:'';clear: both;display: block;}.goods_name{max-width: 500rpx;overflow: hidden;display: block;float: left;white-space: nowrap;text-overflow:ellipsis;}}
				.title text:nth-child(2){float: left;font-size: $uni-font-size-sm;background: $uni-color-error;color:#fff;border-radius: 8rpx;padding:0 20rpx;margin-left: 20rpx;margin-top: 6rpx;}
			}
			.goods_image{
				margin-right: 20rpx;
				border-radius: 10rpx;
				width: 150rpx;
				height: 150rpx;
				float: left;
				background: #eee;
				image{width: 150rpx;height: 150rpx;border-radius: 10rpx;}
			}
		}
		
	}
	.store_list{
		.store_item{
			margin-bottom: 20rpx;
			background: #fff;
			width: 100%;
			min-height:150rpx ;
			border-radius: 10rpx;
			padding: 30rpx;
			&:after{
				content:'';
				display: block;
				clear: both;
			}
			.store_info{
				float: left;
				position: relative;
				// .distance{
				// 	position: absolute;
				// 	top:8rpx;
				// 	font-size: $uni-font-size-sm;
				// 	color:$uni-color-error;
				// 	right: 8rpx;
				// 	text:last-child{margin-left: 5rpx;}
				// }
				.sxrate{line-height: 14px;height: 14px;}
				.title_before{max-width: 500rpx;font-size: $uni-font-size-sm;color:#999;height: 45rpx;line-height: 45rpx;overflow: hidden; white-space: nowrap;text-overflow:ellipsis;}
				.rate{display:inline-flex;}
				.title{margin-bottom: 10rpx;&:after{content:'';clear: both;display: block;}.store_name{max-width: 300rpx;overflow: hidden;display: block;float: left;white-space: nowrap;text-overflow:ellipsis;}}
				.title text:nth-child(2){float: left;font-size: $uni-font-size-sm;background: $uni-color-error;color:#fff;border-radius: 8rpx;padding:0 20rpx;margin-left: 20rpx;margin-top: 6rpx;}
			}
			.store_logo{
				margin-right: 20rpx;
				border-radius: 10rpx;
				width: 150rpx;
				height: 150rpx;
				float: left;
				background: #eee;
				image{width: 150rpx;height: 150rpx;border-radius: 10rpx;}
			}
		}
		padding-top: 20rpx;
		// padding: 30rpx;
	}
		
}
</style>
